<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于webGL的云层动画js插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link rel="stylesheet" type="text/css" href="static/css/normalize.css"/>
    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="static/css/bootstrap4.3.1.min.css">
    <link rel="stylesheet" href="static/css/zhuce.css">
    <style type="text/css">
        html,
        body {
            height: 100%;
            min-height: 100%;
            font-family: 'Roboto Slab', serif;
            font-size: 1em;
        }

        label {
            float: left;
        }

        html,
        body,
        ul,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
            padding: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        #canvasContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 240px;
            z-index: -1;
        }

        .page {
            width: 960px;
            margin: 0 auto;
        }

        header {
            height: 240px;
            padding: 0 40px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
        }

        header > h1 {
            font-size: 3em;
            margin-bottom: 12px;
        }
    </style>
    <!--    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>-->
</head>
<body>

<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<div id="canvasContainer">
    <canvas id="myCanvas"></canvas>
</div>

<div class="page">
    <header>
        <h1>学生管理系统</h1>
    </header>
</div>
<div class="inputBox">
    <div class="form-group inputHead">欢迎您的加入<span id="close">X</span></div>
    <form class="form-horizontal " method="post" action="register">
        <div class="form-group">
            <label for="inputUsername" class="col-sm-3 control-label">账号：</label>
            <div class="col-sm-10">
                <input type="text" style="display: inline-block;" name="username" class="form-control newInput inputs1"
                       id="inputUsername" placeholder="由10为数字组成"><span></span>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="col-sm-3 control-label">密码：</label>
            <div class="col-sm-10">
                <input type="text" style="display: inline-block;" name="password" class="form-control newInput inputs2"
                       id="inputPassword" placeholder="请填写英文或中文"><span></span>
            </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success" style="transform: translateX(180%);">确认提交</button>
        </div>
    </form>

</div>

<script src="static/js/jquery-1.12.4.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script> -->
<script src="static/lib/klouds.min.js"></script>
<script src="static/js/firstjs.js"></script>
<script>
    $(function () {

        // var code = document.getElementById('fiddle-code')
        // var jq_code = document.getElementById('fiddle-jq-code')
        var mySky = klouds.create({
            selector: '#myCanvas',
            layerCount: 5
        })

        // onChange(mySky)

        // klouds.create({
        //   selector: '#second-cloud',
        //   bgColor: 'white',
        //   cloudColor1: 'white',
        //   cloudColor2: '#fc0'
        // })

        // var layerCount = document.getElementById('klouds-range')
        // layerCount.addEventListener('input', function (e) {
        //   mySky.setLayerCount(parseInt(e.target.value))
        //   onChange(mySky)
        // })

        // var speed = document.getElementById('klouds-speed')
        // speed.addEventListener('input', function (e) {
        //   mySky.speed = e.target.value
        //   onChange(mySky)
        // })

        // $('#klouds-cloudcolor1').spectrum({
        //   color: '#19b2cc',
        //   showButtons: false,
        //   preferredFormat: 'hex',
        //   move: function (color) {
        //     mySky.setCloudColor1(color.toHexString())
        //     onChange(mySky)
        //   }
        // })

        // $('#klouds-cloudcolor2').spectrum({
        //   color: '#ffffff',
        //   showButtons: false,
        //   preferredFormat: 'hex',
        //   move: function (color) {
        //     mySky.setCloudColor2(color.toHexString())
        //     onChange(mySky)
        //   }
        // })

        // $('#klouds-bgcolor').spectrum({
        //   color: '#00667f',
        //   showButtons: false,
        //   preferredFormat: 'hex',
        //   move: function (color) {
        //     mySky.setBgColor(color.toHexString())
        //     onChange(mySky)
        //   }
        // })

        function formatColor(color) {
            return (
                '#' +
                color
                    .map(function (c) {
                        return Math.round(c * 255).toString(16)
                    })
                    .join('')
            )
        }


    })
</script>
<!--<div style="height: 300px; width: 300px; margin-top: 10%; margin-left: 30%">-->
<!--    <form action="register" method="post">-->
<!--        <div class="form-group">-->
<!--            <label for="InputUsername">username</label>-->
<!--            <input type="text" class="form-control" id="InputUsername" name="username">-->
<!--            &lt;!&ndash;        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>&ndash;&gt;-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label for="inputPassword">Password</label>-->
<!--            <input type="text" class="form-control" id="inputPassword" name="password">-->
<!--        </div>-->
<!--        <button type="submit" class="btn btn-primary">Submit</button>-->
<!--    </form>-->
<!--</div>-->

</body>
</html>